{% extends "_base.html" %}
{% load bootstrap3 %}
{% load staticfiles %}
{% load filt %}

{% block  title %}容器YML修改{% endblock %}

{% block header %}
    <link rel="stylesheet" href="{% static 'plugins/datatimepicker/css/bootstrap-datetimepicker.min.css' %}">

    <link rel="stylesheet" href="{% static 'codemirror/theme/seti.css' %}"/>

    <link rel="stylesheet" href="{% static 'codemirror/lib/codemirror.css' %}"/>

    <script src="{% static 'codemirror/lib/codemirror.js' %}"></script>
    <script src="{% static 'codemirror/mode/javascript/javascript.js' %}"></script>


{% endblock header %}


{% block left %}
    {% include "_left.html" with cmdb_docker_yml_active="active" %}
{% endblock left %}



{% block page-content %}


    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>资产管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/">主页</a>
                </li>
                <li>
                    <a href="{% url 'cmdb:docker_yml_list' %}">容器YML列表</a>
                </li>
                <li class="active">
                    <strong>Docker-Compose Yml</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>


    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>信息浏览</h5>
                </div>
                <div class="ibox-content">
                    {# {{ form.as_table }} #}
                    <form class="form-horizontal" class="form-horizontal" action=""
                        method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% if form.errors %}
                        <div class="alert alert-danger" style="margin: 20px auto 0px">
                            {{ form.errors }}
                        </div>
                        {% endif %}

                        {% bootstrap_field form.name layout="horizontal" %}
                        {% if object %}
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="id_file">容器YML分组</label>
                            <div class="col-md-9">
                                <select name="group" title="" required="" class="form-control" id="id_group" readonly="">
                                  <option value="{{ object.group.id }}">{{ object.group }}</option>
                                </select>
                            </div>
                        </div>
                        {% else %}
                        {% bootstrap_field form.group layout="horizontal" %}
                        {% endif %}

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="id_file">Yml文件名</label>
                            <div class="col-md-9">
                                <input type="text" name="file" value="{{ object.file }}" title="" required="" id="id_file" maxlength="100" placeholder="Yml文件名" class="form-control" {% if object %}readonly=""{% endif %}>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="id_text">Yml内容</label>
                            <div class="col-md-9">
                                <textarea name="yml" rows="30" title="" cols="40" id="id_yml" placeholder="Yml内容" class="form-control">{{ yml }}</textarea>
                            </div>
                        </div>

                        {% bootstrap_field form.text layout="horizontal" %}
                        {% bootstrap_field form.state layout="horizontal" %}

                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">

                                <button class="btn btn-primary" type="submit">提交</button>
                                <button class="btn btn-white" type="reset">重置</button>
                            </div>
                        </div>

                    </form>



                </div>
            </div>
        </div>

    </div>


{% endblock %}



{% block footer-js %}



<script>

    var values = {
        lineNumbers: true, // 显示行号
        styleActiveLine: true,
        matchBrackets: true,
        lineWrapping:"wrap", // 按宽度换行
        // readOnly: true, // 只读
        // readOnly: "nocursor", // 只读且不显示文本光标焦点，但不能复制文本
        theme: "seti",
    };

    var textarea = document.getElementById("id_yml");
    var editor = CodeMirror.fromTextArea(textarea, values);
    editor.setSize("100%", "100%");

    // console.dir(editor);



/*    var input = document.getElementById("select{{ host_msg.1 }}");
    function selectTheme() {
      var theme = input.options[input.selectedIndex].textContent;
      editor.setOption("theme", theme);
      // location.hash = "#" + theme;
    }

    var choice = (location.hash && location.hash.slice(1)) ||
                 (document.location.search &&
                  decodeURIComponent(document.location.search.slice(1)));
    if (choice) {
        input.value = choice;
        editor.setOption("theme", choice);
    }
    CodeMirror.on(window, "hashchange", function() {
        var theme = location.hash.slice(1);
        if (theme) { input.value = theme; selectTheme(); }
    });
*/




</script>


{% endblock footer-js %}





